<template>
<!-- 1、 camelCase
  <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">
  <h1>测试数据</h1>
  </div>   -->
<!-- 2、 kebab-cased
  <div :style="{ 'font-size': fontSize + 'px' }">
  <h1>测试数据</h1>
</div> -->
<!-- 3、 直接绑定
  <div :style="styleObject">
  <h1>测试数据</h1>
</div> -->
<div :style="[baseStyles, overridingStyles]">
  <h1>测试数据</h1>
  <h2>TestData</h2>
  <h1>测试数据</h1>
</div>
</template>

<script>
export default {
  data(){
    return{
      // activeColor:'red',
      // fontSize:60

      //   styleObject: {
      //   color: 'red',
      //   fontSize: '30px'
      // }

      baseStyles:{
        color:'red',
        fontSize:'30px'
      },
      overridingStyles:{
        color:'blue',
        
      }
    }
  }

}
</script>
<style>

</style>
